html {
  background-color: black;
}
.wrapper {
  width: 400px;
  height: 400px;
  position: relative;
  transform-origin: bottom center;
  transform: rotate(-45deg);
  margin-left: 600px;
}
.box {
  height: 200px;
  width: 200px;
  /* margin-top: 200px; */
  /* margin-left: 200px; */
  /* border-radius: 0px 100%  0 100%; */
  /* border-radius: 100% 0 100% 0; */
  border-radius: 100% 0;
  background-color: pink;
  transform-origin: bottom left;
  /* transform: rotate(45deg); */
  position: absolute;
  /* top: 50%; */
  transition: all 2s;
  /* animation: donghua 2s linear infinite; */
}
.wrapper:hover .box:nth-of-type(1) {
  transition: all 2s;
  transform: rotate(-90deg);
  opacity: 0.3;
}
.wrapper:hover .box:nth-of-type(2) {
  transition: all 2s;
  transform: rotate(-60deg);
  opacity: 0.3;
}
.wrapper:hover .box:nth-of-type(3) {
  transition: all 2s;
  transform: rotate(-30deg);
  opacity: 0.3;
}
.wrapper:hover .box:nth-of-type(4) {
  transition: all 2s;
  transform: rotate(0deg);
  opacity: 0.3;
}
.wrapper:hover .box:nth-of-type(5) {
  transition: all 2s;
  transform: rotate(30deg);
  opacity: 0.3;
}
.wrapper:hover .box:nth-of-type(6) {
  transition: all 2s;
  transform: rotate(60deg);
  opacity: 0.3;
}
.wrapper:hover .box:nth-of-type(7) {
  transition: all 2s;
  transform: rotate(90deg);
  opacity: 0.3;
}
